<template>
	<view class="uiwu uiwu-ios" :style="{'background-image':`url(${uiwu.imgUrl}yuandian.png)`}">
		<uiwu-list :loading="more">
			<view class="uiwu-goods">
				<view class="uiwu-goods-list uiwu-flex">
					<view 
						class="uiwu-goods-list-item"
						v-for="(item,index) in listData" 
						:key="index"
						@tap.stop="uiwu.openWindow(`/pages/index/detail?id=${item.id}`)"
					>
						<view class="top">
							<image :src="item.product.image" mode="aspectFill"></image>
							<view class="taglabel" v-if="item.product.floors_sill > 0 && item.product.is_floors">{{item.product.floors_sill}}包夹</view>
							<view class="price uiwu-flex-space">
								<image src="/static/jinbi.png" mode="widthFix" style="width: 32rpx;"></image>
								<text>X{{item.product.gold}}</text>
								<view class="btn uiwu-flex-center">GO</view>
							</view>
						</view>
						<view class="goods-name uiwu-hidden2">{{item.product?.store_name}}</view>
					</view>
				</view>
			</view>
		</uiwu-list>
	</view>
</template>

<script setup lang="ts">
	import { onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { devicelist } from '@/api/api';
	import { ref } from 'vue';
	import { uiwu } from '@/config/config';
	const listData = ref<Array<object>>([])
	const pageNum = ref<number>(1)
	const more = ref<string>('loading');
	const isLock = ref<boolean>(true)
	const ids = ref<string|number>(0)
	const getdevicelist = async (mack:boolean=false) : Promise<any> => {
		if(!mack) pageNum.value = 1
		const { data:{data , total}} = await devicelist({
			page:pageNum.value,
			product_id:ids.value
		});
		isLock.value = true
		uiwu.setlist({
			isMore:mack,
			listData,
			total,
			listRow:data,
			more,
			pageNum
		})
	}
	/**
	 * 加载更多
	 */
	onReachBottom(()=>{
		if(!isLock.value) return 
		isLock.value = false
		pageNum.value++
		getdevicelist(true)
	})
	onLoad(({id})=>{
		ids.value = id
		getdevicelist()
	})
</script>

<style lang="scss">
	.uiwu{
		background-repeat: no-repeat;
		background-position: 0 0;
		background-color: #EF821E;
		padding-bottom: 22rpx;
		background-size: 100% 100%;
		min-height: 100vh;
	}
	.uiwu-goods{
		margin-top: 20rpx;
		padding: 0 15rpx;
		&-list{
			// background: url('../../static/goodsbg.png') no-repeat 0 0;
			background-size: 100% 100%;
			padding: 22rpx;
			flex-wrap: wrap;
			justify-content: space-between;
			border: 3rpx solid #000;
			background-color: #fff;
			border-radius: 30rpx;
			&-item{
				width: 330rpx;
				margin-bottom: 32rpx;
				min-height: 410rpx;
				.top{
					background: #FCE5C7;
					width: 330rpx;
					height: 330rpx;
					border-radius: 16rpx;
					padding: 11rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
					.taglabel{
						width: 114rpx;
						height: 42rpx;
						position: absolute;
						right: 21rpx;
						top: 21rpx;
						z-index: 9;
						background: url('../../static/guigebg.png') no-repeat 0 0;
						background-size: 100% 100%;
						font-size: 22rpx;
						font-weight: 500;
						color: #FFFFFF;
						text-align: center;
						line-height: 44rpx;
					}
					.price{
						position: absolute;
						z-index: 9;
						left: 11rpx;
						right: 11rpx;
						bottom: 11rpx;
						height: 50rpx;
						background: rgba(#000,0.6);
						border-radius: 0px 0px 8rpx 8rpx;
						padding: 0 9rpx;
						text{
							flex: 1;
							font-size: 20rpx;
							font-weight: 500;
							color: #FFFFFF;
							margin-left: 6rpx;
						}
						.btn{
							width: 80rpx;
							height: 36rpx;
							background: linear-gradient(180deg, #8DC21F 0%, #5BB431 100%);
							border-radius: 19rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: #FFFFFF;
							padding-right: 10rpx;
							line-height: 1;
							&::before{
								content: "";
								display: block;
								width: 12rpx;
								height: 12rpx;
								box-shadow: 0px 3rpx 6rpx 1rpx rgba(90,135,0,0.5);
								border: 2rpx solid #FFFFFF;
								border-radius: 50%;
								margin-right: 10rpx;
								box-sizing: border-box;
							}
						}
					}
				}
				.goods-name{
					font-size: 30rpx;
					font-weight: bold;
					color: #231815;
				}
			}
		}
	}
</style>
